{extend name="base"/}
{block name="resources"}
<style>
	.ns-exchange-type{display: inline-block;width: 141px;height: 68px;border: 1px solid #ededed;border-radius: 4px;margin-right: 10px;margin-bottom: 10px;line-height: 68px;position: relative;cursor: pointer;}
    .ns-exchange-type:hover{border: 1px solid #ff8143;}
    .ns-exchange-selected{border: 1px solid #ff8143;}
    .ns-exchange-selected:after{content: "";display: inline-block;width: 20px;height: 20px;background-image: url(__STATIC__/img/selected.png);position: absolute;bottom: 0;right: 0;}
    .style{display: flex;-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;padding: 0 20px;}
    .style div{width: 50px;height: 16px;}
    .style p{margin-left: 14px;font-size: 12px;color: #333;}
    .style.style-red div{background: url(SHOP_IMG/style/color_panel.png) no-repeat 0 0;}
    .style.style-green div{background: url(SHOP_IMG/style/color_panel.png) no-repeat -77px 0;}
    .style.style-blue div{background: url(SHOP_IMG/style/color_panel.png) no-repeat -156px 0;}
	.style.style-pink div{background: url(SHOP_IMG/style/pink.png) no-repeat;}
	.style.style-golden div{background: url(SHOP_IMG/style/golden.png) no-repeat;}
	.style.style-orange div{background: url(SHOP_IMG/style/orange.png) no-repeat;}
    .style_theme img{margin-right: 64px; margin-bottom: 50px; height: 534px;width: 300px;-webkit-box-shadow: 5px 5px 20px #f5f5f5;box-shadow: 5px 5px 20px #f5f5f5;}
</style>
{/block}
{block name="main"}

<div class="layui-form ns-form">

	<div class="layui-form">
		<div class="layui-form-item">
			<div class="layui-input-block">
				<div class="ns-exchange-type exchange_default" data-status="default">
					<div class="style style-orange">
						<div></div>
						<p>活力橙</p>
					</div>
				</div>
				<!-- <div class="ns-exchange-type exchange_blue" data-status="blue">
                    <div class="style style-blue"><div></div><p>商务蓝</p></div>
                </div>

                <div class="ns-exchange-type exchange_green" data-status="green">
                    <div class="style style-green"><div></div><p>纯净绿</p></div>
                </div>
				
				<div class="ns-exchange-type exchange_pink" data-status="pink">
				    <div class="style style-pink"><div></div><p>樱花粉</p></div>
				</div>
				
				<div class="ns-exchange-type exchange_golden" data-status="golden">
				    <div class="style style-golden"><div></div><p>魅力金</p></div>
				</div> -->


				<div class="ns-exchange-type ns-exchange-selected exchange_red" data-status="red">
					<div class="style style-red">
						<div></div>
						<p>热情红</p>
					</div>
				</div>

				<input type="hidden" name="style_theme" {if isset($style_theme['style_theme'])} value="{$style_theme.style_theme}"
				 {/if}> </div> </div> <div class="layui-form-item">
				<div class="layui-input-block">
					<div class="style_theme style_theme_default">
						<img src="SHOP_IMG/style/decorate-orange-1.png" alt="">
						<img src="SHOP_IMG/style/decorate-orange-2.png" alt="">
						<img src="SHOP_IMG/style/decorate-orange-3.png" alt="">
					</div>
					<!-- <div class="style_theme style_theme_blue">
                    <img src="SHOP_IMG/style/decorate-blue-1.png" alt="">
                    <img src="SHOP_IMG/style/decorate-blue-2.png" alt="">
					<img src="SHOP_IMG/style/decorate-blue-3.png" alt="">
                </div>

               <div class="style_theme style_theme_green">
                    <img src="SHOP_IMG/style/decorate-green-1.png" alt="">
                    <img src="SHOP_IMG/style/decorate-green-2.png" alt="">
					<img src="SHOP_IMG/style/decorate-green-3.png" alt="">
                </div>
				
				<div class="style_theme style_theme_pink">
				    <img src="SHOP_IMG/style/decorate-pink-1.png" alt="">
				    <img src="SHOP_IMG/style/decorate-pink-2.png" alt="">
					<img src="SHOP_IMG/style/decorate-pink-3.png" alt="">
				</div>
				
				<div class="style_theme style_theme_golden">
				    <img src="SHOP_IMG/style/decorate-golden-1.png" alt="">
				    <img src="SHOP_IMG/style/decorate-golden-2.png" alt="">
					<img src="SHOP_IMG/style/decorate-golden-3.png" alt="">
				</div> -->
					<div class="style_theme style_theme_red">
						<img src="SHOP_IMG/style/decorate-default-1.png" alt="">
						<img src="SHOP_IMG/style/decorate-default-2.png" alt="">
						<img src="SHOP_IMG/style/decorate-default-3.png" alt="">
					</div>
				</div>
			</div>

			<div class="ns-form-row style_theme">
				<button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
			</div>

		</div>
	</div>

	{/block}
	{block name="script"}
	<script>
		var style_theme = $("input[name='style_theme']").val();
		style_theme = style_theme == '' ? 'default' : style_theme;

		$("input[name='style_theme']").val(style_theme);

		$('.exchange_' + style_theme).addClass("ns-exchange-selected");
		$('.exchange_' + style_theme).siblings("div").removeClass("ns-exchange-selected");

		$('.style_theme_' + style_theme).show();
		$('.style_theme_' + style_theme).siblings(".style_theme").hide();

		$(".ns-exchange-type").click(function() {
			$(this).addClass("ns-exchange-selected");
			$(this).siblings("div").removeClass("ns-exchange-selected");

			var style_theme = $(this).attr('data-status');
			$("input[name='style_theme']").val(style_theme);

			$('.style_theme_' + style_theme).show();
			$('.style_theme_' + style_theme).siblings(".style_theme").hide();
		});

		layui.use('form', function() {
			var form = layui.form,
				repeat_flag = false; //防重复标识

			/**
			 * 监听提交
			 */
			form.on('submit(save)', function(data) {

				if (repeat_flag) return;
				repeat_flag = true;
				$.ajax({
					url: ns.url("shop/diy/style"),
					data: data.field,
					dataType: 'JSON',
					type: 'POST',
					success: function(res) {
						repeat_flag = false;
						layer.msg(res.message);
					}
				});

			});
		});
	</script>

	{/block}
